<!DOCTYPE html>
<html xmlns:v-modle="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>佰林の用户信息修改</title>
    <link rel="stylesheet" href="/common/layui/css/layui.css">
    <link rel="stylesheet" href="/admin/css/style.css">
    <script src="/common/layui/layui.js"></script>
    <script src="/common/jquery-3.3.1.min.js"></script>
    <script src="/common/vue.min.js"></script>
</head>
<body>
<div id="app">


    <div class="main">
        <div id="fixedData">
            <!--顶栏-->
            <header>
                <h1 v-text="webname"></h1>
                <div class="breadcrumb">
                    <i class="layui-icon">&#xe715;</i>
                    <ul>
                        <li><a href="javascript:;">个人信息</a></li>
                    </ul>
                </div>
            </header>
            <!--左栏-->
            <div class="left">
                <ul class="cl">
                    <!--顶级分类-->
                    <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                        <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                            <i class="layui-icon" v-html="vo.icon"></i>
                            <span v-text="vo.name"></span>
                            <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i>
                            <i v-show="vo.active" class="layui-icon active">&#xe623;</i>
                        </a>
                        <!--子级分类-->
                        <div v-for="vo2,index2 in vo.list">
                            <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                               v-text="vo2.name"></a>
                            <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!--右侧-->
        <div class="right" id="Right">
            <div class="layui-form" action="" >
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" v-model="userInfo.username"  required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input" disabled>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码框</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" v-model="userInfo.password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">真实姓名</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" v-model="userInfo.realName" required lay-verify="required" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input v-if="userInfo.sex==='男'" type="radio" name="sex"  title="男" checked v-model="userInfo.sex" value="男">
                        <input v-else type="radio" name="sex"  title="男" v-model="userInfo.sex" value="男">
                        <input v-if="userInfo.sex==='女'" type="radio"  name="sex" title="女" checked v-model="userInfo.sex" value="女">
                        <input v-else type="radio"  name="sex" title="女" v-model="userInfo.sex" value="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">邮箱</label>
                    <div class="layui-input-block">
                        <input type="email" name="title" required lay-verify="required" v-model="userInfo.email" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="phone" name="title" required lay-verify="required" v-model="userInfo.phone" placeholder="请输入标题"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <textarea name="desc" placeholder="请输入内容" v-model="userInfo.address" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo" >修改</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="/admin/js/config.js"></script>
<script>
    let right = new Vue({
        el:'#Right',
        data: {
            userInfo:{
                username:''
            }
        },
        methods:{
            //查询数据
            getUserInfo(id){
                $.ajax({
                    url:'showUserList/selectById',
                    type:'post',
                    data:JSON.stringify({
                        id:id
                    }),
                    contentType: "application/json;charset=UTF-8",
                    success: (data)=> {
                        if(data){
                            this.userInfo = data
                            console.log(data)
                        }
                    }
                })
            },

            //提交数据
            setSubmit(){
                $.ajax({
                    url:'showUserList/update',
                    type:'post',
                    data:JSON.stringify(
                        this.userInfo
                    ),
                    contentType: "application/json;charset=UTF-8",
                    success: (data)=> {
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg('修改成功');
                        });

                    }
                })
            },


        },
        mounted(){
            console.log(localStorage.getItem('userI0fo'))
            if(isNotEmpty(localStorage.getItem('userInfo'))){
                let id = JSON.parse( localStorage.getItem('userInfo') ).id
                this.getUserInfo(id)
            }
        },
    })

</script>

<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            right.userInfo.sex = data.field.sex
            console.log(data,'123')
            $.ajax({
                url:'showUserList/update',
                type:'post',
                data:JSON.stringify(
                    right.userInfo
                ),
                contentType: "application/json;charset=UTF-8",
                success: (data)=> {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('修改成功');
                    });

                }
            })
            return false;
        });
    });
</script>
</body>
</html>
